<template>
	<view class="content">
		<view class="statusBox"></view>
		<view class="Titles" :class="titleType==1 ? 'title_black':''">
			<image class="iconBack" src="/static/index/icon_back2.png" mode="" v-if="titleType == 0" @tap="btnBack"></image>
			<image class="iconBack" src="/static/index/icon_back.png" mode=""  v-if="titleType == 1" @tap="btnBack"></image>
			<view class="name textCenter" :class="titleType==1 ? 'title_black':''">商品详情</view>
		</view>
		<uni-swiper-dot class="swiper" :info="bannerList" :current="current" mode="nav" :dotsStyles="dotsStyles">
			<swiper class="swiper-box swiper" @change="change" autoplay="autoplay" circular="true">  
				<swiper-item v-for="(item, indexc) in bannerList" :key="indexc"  @tap="tapBanner(item.type,item.video)">
					<image class="swiperitem banner"  :src="item.src"/>
					<view class="iconCenterBox" v-if="item.type==1" @tap="showVideoShadow = true">
						<image class="videoPlay"  src="/static/index/details/icon_play.png"/>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="priceBoxes">
			<view class="title overflow_two">{{datas.title}}</view>
			<view class="describe">{{datas.describe}}</view>
			<!-- <button open-type="share">
				<image class="iconShare" src="/static/index/details/icon_share.png" mode=""></image>@tap="showHideBox = true"
			</button> -->
			<view class="clearBoth"></view>
		</view>
		<view class="clearBoth"></view>
		
		<view class="splite"></view>
		<view class="splite"></view>
		
		<view class="chooseBox" >
			<!-- <view class="leftBox">{{item.leftName}}</view> -->
			<view class="rightBox">
				<view class="thisOne overflow_one" :class=" item.beThis ? 'orange_bg':'' " v-for="(item,index) in ruleList" :key="index" @tap="thisTips(item,index)">{{item.name}}</view>
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="titlesA" v-show="datas.html">商品详情</view>
		<view class="html" v-html="datas.html"></view>
		
		<view class="footer">
			<view class="topBox" v-show=" datas.price ">
				<view class="price fontSemiBold">¥ {{datas.price}}</view>
				<image class="iconVip" src="/pages_kafei/pages/static/icon_4.png" mode=""></image>
				<view class="vipPrice fontSemiBold">¥ {{datas.vipPrice}}</view>
				<view class="rightBox">
					<view class="lessBox" @tap="computeBtn(0)">-</view>
					<view class="number">{{datas.number}}</view>
					<view class="addBox"  @tap="computeBtn(1)">+</view>
				</view>
				<view class="clearBoth"></view>
			</view>
			<view class="btnSure" @tap="btnSure">立即下单</view>
		</view>
		
		<view class="hideBox" v-if="showHideBox">
			<view class="bg_grey" @tap="showHideBox = false"></view>
			<view class="bg_white">
				<button class="iconBox btnsCss" open-type="share">
					<image class="icon" src="/static/index/details/icon_friend.png" mode=""></image>
					<view class="iconName fontSize14">微信好友</view>
				</button>
				<button class="iconBox" @tap="tapBePoster">
					<image class="icon" src="/static/index/details/icon_poster.png" mode=""></image>
					<view class="iconName fontSize14">分享图片</view>
				</button>
				<view class="clearBoth"></view>
				<view class="falses"  @tap="showHideBox = false">取消</view>
			</view>
		</view>
	</view>
</template>
<style>
	.content{padding-bottom: 300upx;}
	.content .statusBox{margin-bottom: 52upx;}
	.content .splite{width: 100%;height:16upx;background: #F5F5F9;}
	.content .noticeBox{width:370upx;height:60upx;line-height: 60upx;position: absolute;top:200upx;left:5%;background:rgba(0,0,0,0.4);border-radius: 100upx;}
	.content .Titles{width: 100%;height:64upx;position: fixed;top:110upx;left: 0;z-index: 7;}
	.content .Titles .iconBack{width: 24upx;height:40upx;position: absolute;left:5%;top:10upx}
	.content .Titles .name{height:60upx;line-height: 60upx;font-size: 40upx;font-weight: bold;color:white}
	.content .title_black{background:white;color:black !important;transition: all 0.5s;}
	.content .swiper{width:100%;height:750upx;margin-top: 5upx;overflow: hidden;}
	.content .swiper .iconSwiper{height:750upx;display: flex;justify-content:space-around;flex-wrap: wrap;}
	.content .swiper .swiperitem{width: 100%;height:750upx;}
	.content .swiper .iconList{width: 20%;height:130upx;display: flex;justify-content:center;flex-wrap: wrap;}
	.content .swiper .biggerIcon{width: 80upx;height:80upx;}
	.content .swiper .lessIcon{width: 52upx;height:52upx;margin:0 10upx;}
	.content .swiper .iconCenterBox{width:100%;height:750upx;display:flex;justify-content: center;align-items: center;position: absolute;top:0;left:0;z-index: 2;}
	.content .swiper .videoPlay{width: 120upx;height:120upx}
	.content .priceBoxes{width: 95%;margin:20upx 0;margin-left: 2.5%;}
	.content .priceBoxes .title{width: 80%;font-weight: bold;font-size: 36upx;float: left;}
	.content .priceBoxes .describe{width: 100%;font-size: 26upx;margin:20upx 0 0upx 0;color:#BBBBBB;float: left;}
	.content .priceBoxes .iconShare{width: 40upx;height: 40upx;margin-left:50upx;margin-top: 10upx;}
	.content .hideBox{width:100%;height:100%;position: fixed;top:0;left:0;z-index: 3;}
	.content .bg_grey{width:100%;height:100%;position: fixed;top:0;left:0;z-index: 4;background: rgba(0,0,0,0.4);}
	.content .bg_white{width:100%;height:23.5%;position: fixed;bottom:0;left:0;z-index: 5;background:white;border-top-left-radius: 20upx;border-top-right-radius: 20upx;padding-bottom: 0;}
	.content .bg_white .iconBox{width:50%;float: left;text-align: center;margin-top:40upx;}
	.content .bg_white .iconBox .icon{width:80upx;height:80upx}
	.content .bg_white .iconBox .iconName{color:#000000}
	.content .bg_white .falses{width: 100%;text-align: center;font-size: 18px;background-color:white;padding:20upx 0;color:#999999}
	.content button::after{border: none;background:none;}
	.content .chooseBox{width:90%;margin-left: 5%;margin-top: 40upx;}
	/* .content .chooseBox .leftBox{width: 20%;float: left;margin-right: 5%;padding-top: 10upx;font-size: 32upx;color:#000000;font-weight: bold;} */
	.content .chooseBox .rightBox{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;} /* rgb(245,245,249) */
	.content .chooseBox .rightBox .thisOne{width: 45%;margin-right:5%;padding:10upx 0;border-radius: 100upx;margin-bottom: 30upx;background:rgb(245,245,249);border:2upx solid rgb(245,245,249);font-size: 26upx;color:#262626;text-align: center;}
	.content .chooseBox .rightBox .orange_bg{border:2upx solid #DC582A;color:#DC582A}
	.content .titlesA{margin-top: 40upx;font-size: 36upx;color:#262626;font-weight: bold;margin-left: 5%;}
	.content .html{margin-top: 20upx;}
	.content .footer{width: 100%;height:180upx;position: fixed;left:0;bottom: 0;z-index: 2;border-top:2upx solid #ccc;background: white;}
	.content .footer .topBox{width: 90%;margin-left: 5%;height:50upx;line-height: 50upx;margin-top: 20upx;}
	.content .footer .topBox .price{float: left;font-size: 44upx;color:#DC582A;font-weight: bold;}
	.content .footer .topBox .iconVip{float: left;width: 48upx;height:28upx;margin:10upx 20upx 0 40upx;}
	.content .footer .topBox .vipPrice{float: left;font-size: 32upx;color:#262626;font-weight: bold;}
	.content .footer .topBox .rightBox{float: right;}
	.content .footer .topBox .rightBox .lessBox{float: left;width:40upx;height:40upx;line-height: 34upx;border-radius: 50upx;border:2upx solid #DC582A;color:#DC582A;text-align: center;font-size: 40upx;margin-top: 5upx;}
	.content .footer .topBox .rightBox .number{float: left;width:100upx;text-align: center;}
	.content .footer .topBox .rightBox .addBox{float: left;width:40upx;height:40upx;line-height: 34upx;border-radius: 50upx;border:2upx solid #DC582A;background:#DC582A;color:white;text-align: center;font-size: 40upx;margin-right: 20upx;margin-top: 5upx;}
	.content .footer .btnSure{width: 90%;height:80upx;line-height: 80upx;margin-top: 25upx;;margin-left: 5%;background:#DC582A;color:white;border-radius: 100upx;text-align: center;font-size: 32upx;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import AnNoticeBar from '@/components/an-notice-bar/an-notice-bar.vue'
	export default {
		components:{
			uniSwiperDot,
			AnNoticeBar,
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages_kafei/pages/details/details',
					imageUrl:'',
					desc:'',
					content:''
				},
				titleType:0,
				bannerList:[
					// {src:"/static/index/banner.png",type:1,video:"/static/del/video.mp4"},
					// {src:"/static/index/banner.png",type:0,video:""}
				],
				current:0,
				dotsStyles:{
					bottom:0,
					backgroundColor: 'rgba(0,0,0,0.4)',
					border: '1px solid none',
					color: 'none',
					selectedBackgroundColor: 'white',
					selectedBorder: '1px none solid'
				},
				datas:{
					goodsId:"",
					model_id:"",
					machineCode:"",
					taste_id:"",
					title:"",
					describe:"",
					html:"",
					price:"",
					vipPrice:"",
					number:1
				},
				showHideBox:false,
				ruleList:[]

			}
		},
		onLoad(e){
			// this.share.path += "?id=" + e.id
			this.share.path = this.share.path+"?id=" + e.id+ "&NewUserId=" + this._$userToken("userInfo").id
			if( e.NewUserId ){
				try {
				    uni.setStorageSync('NewUserId', e.NewUserId);
				}catch(e){}
			}
			this.datas.goodsId = e.goods_id
			this.datas.machineCode = e.machineCode
			this.datas.model_id = e.model_id
			this.AjaxLoad()
		},
		onPageScroll(e){
			if( e.scrollTop > 50 ){
				this.titleType = 1
			}else{
				this.titleType = 0
			}
		},
		methods: {
			AjaxLoad(){
				var bannerList = [],ruleList = []
				let param={
					token:this._$userToken("userInfo").token,
					goods_id:this.datas.goodsId,
					machineCode:this.datas.machineCode,
					model_id:this.datas.model_id,
				};
				this._$InitRequest.request("coffee/getGoodsInfo", param).then(res => {
					bannerList.push({
						src:res.data.goods_url,
						type:0
					})
					for (var i = 0; i < bannerList.length; i++){this.bannerList.push( bannerList[i] )}
					
					this.datas.title = res.data.goods_name
					this.datas.describe = res.data.remark
					
					res.data.attr.forEach( (item,index) =>{
						ruleList.push({
							beThis:false,
							name:item.taste_name,
							price:item.price,
							vipPrice:item.vip_price,
							html:item.remark,
							taste_id:item.taste_id,
						})
					})
					for (var i = 0; i < ruleList.length; i++){this.ruleList.push( ruleList[i] )}
					
				},error=>{})
			},
			tapBanner(){},
			btnBack(){uni.navigateBack({delta:1})},
			change(e){this.current = e.detail.current},
			thisTips(item,index){
				for (var i = 0; i < this.ruleList.length; i++) {
					this.ruleList[i].beThis = false
				}
				this.ruleList[index].beThis = true
				this.datas.price = this.ruleList[index].price
				this.datas.vipPrice = this.ruleList[index].vipPrice
				this.datas.html = this.ruleList[index].html
				this.datas.taste_id = this.ruleList[index].taste_id
			},
			computeBtn(e){
				if( e == 0 ){
					if( this.datas.number > 1 ){
						this.datas.number --
					}
				}else{
					this.datas.number ++
				}
			},
			btnSure(){
				//数量
				// console.log( this.datas.number );
				
				//规格
				// var rule = []
				// for (var i = 0; i < this.ruleList.length; i++) {
				// 	for(var a = 0;a<this.ruleList[i].rightName.length;a++){
				// 		if( this.ruleList[i].rightName[a].beThis == true ){
				// 			rule.push( this.ruleList[i].rightName[a].id )
				// 		}
				// 	}
				// }
				// rule = rule.toString()
				if( this.datas.price ){
					uni.navigateTo({
						url:"/pages_kafei/pages/sureOrder/sureOrder?machineCode=" + this.datas.machineCode + "&model_id=" + this.datas.model_id + "&goods_id=" + this.datas.goodsId + "&taste_id=" + this.datas.taste_id + "&num=" + this.datas.number
					})
				}else{
					uni.showToast({icon:"none",title:"请选择规格"})
				}
			},
			
			
			
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
	width: 90%;
	margin-left:5%;
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>